import { createApp } from 'vue'
import App from './App.vue'
import 'normalize.css'
import '@/assets/styles/common.less'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'
import router from './router'
import xtxUI from '@/components'
import { appendFile } from 'fs'
import { useIntersectionObserver } from '@vueuse/core'
const pinia = createPinia()

const app = createApp(App)
app.directive('lazy', {
    mounted(el, { value }) {
        // console.log('lazy',el,binding.value);
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
            if (isIntersecting) {
            // 停止监听
            stop()
            // 给el元素设置src属性
            // value = '123.jpg'
            el.src = value
            // 如果图片加载失败，显示默认的图片
            el.onerror = function () {
              el.src =  "@/assets/images/200.png"
            }
          }
        }
        )
    }
})
app.use(pinia).use(router).use(xtxUI).mount('#app')

pinia.use(piniaPersist)